﻿@page
@model FytSoa.Web.Pages.FytAdmin.Sys.TaskSchedulerModel
@{
    ViewData["Title"] = "任务调度管理";
    Layout = AdminLayout.Pjax(HttpContext);
}
<div id="container">
    <style>
        .layui-btn-primary {
            border-radius: 4px !important;
            font-size: 12px;
        }
        .text-red {
            color: red !important;
        }
        .bg-lan{
            background-color:#68b0fa !important;
            color:#fff !important;
            border-color:#68b0fa !important;
        }
        .bg-orange{
            background-color:#FFB800 !important;
            color:#fff !important;
            border-color:#FFB800 !important;
        }
        .bg-red{
            background-color:#FF5722 !important;
            color:#fff !important;
            border-color:#FF5722 !important;
        }
        .bg-cyan{
            background-color:#2F4056 !important;
            color:#fff !important;
            border-color:#2F4056 !important;
        }
        .bg-resume {
            background-color:#5FB878 !important;
            color:#fff !important;
            border-color:#5FB878 !important;
        }
    </style>
    <div class="list-wall" id="app">
        <div class="layui-form list-search">
            <button type="button" class="layui-btn layui-btn-sm" data-type="toolAdd"><i class="layui-icon"></i> 新增</button>
        </div>
        <div class="layui-collapse" style="margin-top: 15px">
            <div class="layui-colla-item" v-for="(it,index) in list">
                <h2 class="layui-colla-title">{{it.groupName}}——任务组</h2>
                <div class="layui-colla-content layui-show">
                    <table class="layui-table layui-hide" lay-skin="line" :id="'table'+index" lay-filter="tool"></table>
                </div>
            </div>
        </div>
        <div v-show="list.length==0">
            <p style="padding:40px; text-align:center;">{{logingText}}</p>
        </div>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [],
                logingText:'加载中...'
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['table', 'layer', 'jquery', 'common', 'element'],
            function () {
                var table = layui.table,
                    layer = layui.layer,
                    $ = layui.jquery,
                    os = layui.common,
                    element = layui.element;
                


                var guid = '',
                    active = {
                        init() {
                            os.load();
                            os.ajax('api/job/GetAllJob',
                                {},
                                function (res) {
                                    os.loadClose();
                                    if (res.statusCode == 200) {
                                        vm.list = res.data;
                                        if (vm.list.length == 0) {
                                            vm.logingText = '无任务';
                                        }
                                        console.log(vm.list);
                                        vm.$nextTick(function () {
                                            element.render('collapse');
                                            for (var i = 0; i < res.data.length; i++) {
                                                for (var j = 0; j < res.data[i].jobList.length; j++) {
                                                    res.data[i].jobList[j].group = res.data[i].groupName;
                                                }
                                                var id = '#table' + i;
                                                table.render({
                                                    elem: id,
                                                    cols: [
                                                        [
                                                            { field: 'jobName', width: 120, title: '任务名称', fixed: 'left' },
                                                            {
                                                                field: 'displayState',
                                                                title: '状态',
                                                                templet: function (d) {
                                                                    if (d.displayState == '正常') {
                                                                        return '<span class="layui-badge layui-bg-blue">正常</span>';
                                                                    } else {
                                                                        return '<span class="layui-badge">' +
                                                                            d.displayState +
                                                                            '</span>';
                                                                    }
                                                                }
                                                            },
                                                            { field: 'requestUrl', width: 120, title: 'Url' },
                                                            { field: 'beginTime', width: 150, title: '开始时间' },
                                                            { field: 'previousFireTime', title: '上次执行时间' },
                                                            { field: 'nextFireTime', title: '下次执行时间' },
                                                            { field: 'cron', title: '执行计划' },
                                                            { field: 'description', width: 100, title: '描述' },
                                                            {
                                                                width: 300,
                                                                title: '操作',
                                                                templet: function (d) {
                                                                    var str = '<a class="layui-btn layui-btn-primary layui-btn-xs bg-cyan" lay-event="execute">执行</a>';
                                                                    str +=
                                                                        '<a class="layui-btn layui-btn-primary layui-btn-xs bg-lan" lay-event="edit">编辑</a>';
                                                                    str +=
                                                                        '<a class="layui-btn layui-btn-primary layui-btn-xs bg-orange" lay-event="stop">停止</a>';
                                                                    str +=
                                                                        '<a class="layui-btn layui-btn-primary layui-btn-xs bg-resume" lay-event="resume">恢复</a>';
                                                                    str +=
                                                                        '<a class="layui-btn layui-btn-primary layui-btn-xs bg-red" lay-event="del">删除</a>';
                                                                    str +=
                                                                        '<a class="layui-btn layui-btn-primary layui-btn-xs bg-lan" lay-event="logs">日志</a>';
                                                                    return str;
                                                                }
                                                            }
                                                        ]
                                                    ],
                                                    page: false,
                                                    data: res.data[i].jobList
                                                });
                                            }
                                        });
                                    } else {
                                        os.error(res.message);
                                    }
                                });
                        },
                        reload: function () {
                            table.reload('tables',
                                {
                                    page: {
                                        curr: 1
                                    }
                                });
                        },
                        toolAdd: function () {
                            os.Open('添加任务调度',
                                '/fytadmin/sys/taskschedulermodify',
                                '1000px',
                                '550px',
                                function () {
                                    active.init();
                                });
                        }
                    };
                //初始化列表
                active.init();
                $('.list-search .layui-btn').on('click',
                    function () {
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });
                //监听工具条
                table.on('tool(tool)',
                    function (obj) {
                        var data = obj.data;
                        if (obj.event === 'edit') {
                            console.log(data);
                            os.Open('修改任务调度信息',
                                '/fytadmin/sys/taskschedulermodify/?group=' + escape(data.jobGroup) + '&name=' + escape(data.jobName),
                                '1000px',
                                '550px',
                                function () {
                                    active.reload();
                                });
                            return;
                        }
                        if (obj.event === 'logs') {
                            os.Open('任务日志-定时刷新',
                                '/fytadmin/sys/tasklogs/?group=' + escape(data.jobGroup) + '&name=' + escape(data.jobName),
                                '1100px',
                                '560px');
                            return;
                        }
                        var tips = '',action='';
                        if (obj.event === 'execute') {
                            //执行
                            tips = '执行';
                            action = 'triggerjob';
                        }
                        if (obj.event === 'stop') {
                            //停止
                            tips = '停止';
                            action = 'stopjob';
                        }
                        if (obj.event === 'resume') {
                            //恢复
                            tips = '恢复';
                            action = 'resumejob';
                        }
                        if (obj.event === 'del') {
                            //删除
                            tips = '删除';
                            action = 'removejob';
                        }
                        
                        layer.confirm('确定要执行'+tips+'吗？',
                            function (index) {
                                layer.close(index);
                                var loadindex = layer.load(1,
                                    {
                                        shade: [0.1, '#000']
                                    });
                                os.ajax('api/job/' + action + '/',
                                    { group: data.jobGroup, name: data.jobName },
                                    function (res) {
                                        layer.close(loadindex);
                                        if (res.statusCode === 200) {
                                            active.init();
                                            os.success('操作成功！');
                                        } else {
                                            os.error(res.message);
                                        }
                                    });
                            });
                    });
            });
    </script>
    <script type="text/html" id="tool">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon"></i> 修改</a>
    </script>
</div>